<template>
  <!-- <div id="three">three</div> -->

  <div id="info">Description</div>
</template>

<script setup lang="ts">
import * as THREE from 'three'

console.log(THREE, 123123)

const scene = new THREE.Scene() //Scene 场景
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
) // 透视摄像机PerspectiveCamera 第一个参数 视野角度 2.参数 长宽比  3.近截面 4.远截面

// camera.position.set(0, 0, 100)
// camera.lookAt(0, 0, 0)

const renderer = new THREE.WebGLRenderer() // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight)

document.body.appendChild(renderer.domElement)

// const geometry = new THREE.BoxGeometry(1, 1, 1) // 创建立方体
// const radius = 7 // ui: radius
// const geometry = new THREE.DodecahedronGeometry(radius)

const radius = 1 // ui: radius
const detail = 5 // ui: detail
const geometry = new THREE.DodecahedronGeometry(radius, detail)

const texture = new THREE.TextureLoader().load(
  'https://cosstatic.weixiaotong.com.cn/static/icon/mini-program/icon-visited.svg',
)

const material = new THREE.MeshBasicMaterial({
  color: '#ffffff',
  map: texture,
}) //选择材质

/* 光源加入 
const color = 0xeeeeee
const intensity = 1
const light = new THREE.DirectionalLight(color, intensity)
scene.add(light)
**/

// 立即使用纹理进行材质创建

// const material = new THREE.LineBasicMaterial({ color: 0x0000ff })

// const points = []
// points.push(new THREE.Vector3(-10, 0, 0))
// points.push(new THREE.Vector3(0, 10, 0))
// points.push(new THREE.Vector3(10, 0, 0))

// const geometry = new THREE.BufferGeometry().setFromPoints(points)
// const line = new THREE.Line(geometry, material)
// scene.add(line)
// renderer.render(scene, camera)
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

camera.position.z = 5

function animate() {
  requestAnimationFrame(animate)
  cube.rotation.x += 0.01
  cube.rotation.y += 0.01
  renderer.render(scene, camera)
}
animate()
</script>

<style lang="scss" scoped>
#info {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  z-index: 100;
  display: block;
  color: #ffffff;
}
</style>
